<template>
	<u-toast ref="uToast"></u-toast>
	<u-navbar v-if="Types.orderType == 0" :title="Title" :autoBack="true" :safeAreaInsetTop="true" :placeholder="true">
	</u-navbar>
	<!-- <template v-if="Types.statusType != 0"> -->
	<template v-if="statusShowType">
		<Map :FunShow="true" :polylines="routeLine.points" :statusType="Types.statusType" :markCover="covers"
			:longitudeMap="longitudeMap" :latitudeMap="latitudeMap">
		</Map>
	</template>
	<view :class="Types.statusType == 0 ? '' : 'Mappos_a'">
		<view class="OrderDeatil">
			<template v-if="Types.statusType == 0">
				<!-- 订单状态 -->
				<view class="item">
					<view class="OrderStatus flex_al_cen_ju_bet">
						<view class="price_status flex_al_cen_ju_bet">
							<view class="price red">
								<text>￥</text>
								<text>{{ orderObj.price }}</text>
							</view>
							<view class="status">待接单</view>
						</view>
						<!-- 外卖 -->
						<view class="num" v-if="Types.orderType == 0">
							#{{ orderObj.dayNum }}
						</view>
						<!-- 跑腿 -->
					</view>
				</view>
			</template>
			<!-- 地址 -->
			<view class="item">
				<!-- 状态栏 -->
				<view class="StatusBar pos_r">
					<!-- 预约 -->
					<view class="pre pos_a">
						<image v-if="orderObj.result" src="../../static/images/pulice/yu.png" mode="scaleToFill" />
					</view>
					<view class="Bar">
						<view class="Timestatus flex_al_cen_ju_bet">
							<view class="Time flex" v-if="Types.statusType == 0">
								<u-icon name="clock" color="#0c22b0" size="16"></u-icon>
								<view class="Song mar_l_r text_ovf">
									<text style="color: #0c22b0">
										{{ textTime(orderObj.predictTime) }}之前送达
									</text>
								</view>
							</view>
							<view class="Time flex"
								v-if="orderObj.predictTime - nowSeconds < 0 && Types.statusType != 0">
								<u-icon name="clock" :color="orderObj.predictTime - nowSeconds > 0 ? '#0c22b0' : 'red'"
									size="16"></u-icon>
								<view class="timeout" v-if="orderObj.predictTime - nowSeconds < 0">您已超时</view>
								<text class="mar_l_r">
									{{ orderObj.deliveryTime }} (原预计{{ forHour(orderObj.predictTime) }}之前送达)
								</text>
							</view>
							<!-- 待取货剩余时间 -->
							<view class="Time flex"
								v-if="Types.statusType != 0 && orderObj.predictTime - nowSeconds > 0">
								<u-icon name="clock" :color="orderObj.predictTime - nowSeconds > 0 ? '#0c22b0' : 'red'"
									size="16"></u-icon>
								<view class="mar_l_r flex" style="color: #0c22b0">
									剩余
									<u-count-down :time="forSeconds(orderObj.predictTime)" format="DD:HH:mm:ss"
										@change="onChange">
										<view class="times_flex">
											{{ timeData.hours }}:{{ timeData.minutes }}:{{ timeData.seconds }}
										</view>
									</u-count-down>
								</view>
								<text class="mar_l_r">
									{{ orderObj.deliveryTime }} ({{ forHour(orderObj.predictTime) }}之前送达)
								</text>
							</view>
							<view class="num" v-if="Types.orderType == 1">
								#{{ orderObj.dayNum }}
							</view>
						</view>
					</view>
				</view>
				<!-- 地址备注 -->
				<view class="AddR_Cont">
					<Address :Type="Types.statusType" :orderType="Types.orderType" :TitleShow="TitleShow"
						:item="orderObj">
					</Address>
					<template v-if="Types.statusType == 1 && Types.orderType == 0">
						<view class="OrderType flex">
							<view class="oc22b0" v-if="orderObj.merchantClientStatus == 2">已出餐</view>
							<!-- <view class="D43509">送货地址已修改</view> -->
							<view class="E6F5FA" v-if="orderObj.merchantClientStatus == 1">正在备餐</view>
						</view>
					</template>
				</view>
			</view>
			<!-- 外卖 商品-->
			<view class="item" v-if="Types.orderType == 0">
				<view class="Takeout_meal">
					<view class="Title flex_al_cen_ju_bet">
						<text>
							{{ orderObj.goodsLength }}种 商品
							<text class="list_text">（共 {{ orderObj.goodsNuall }}件 ）</text>
						</text>
					</view>
					<view class="msg">
						<view class="flexs" v-for="(item, index) in orderObj.goodsVOS">
							<view class="name">
								{{ item.goodsName }} {{ item.goodsSpecification }}
							</view>
							<view> x{{ item.goodsNum }}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单数据 -->
			<view class="item">
				<view class="deatils">
					<view class="Title"> 订单信息</view>
					<view class="msg">
						<view class="flex_al_cen_ju_bet">
							<view>订单编号</view>
							<view> {{ orderObj.orderSn }}</view>
						</view>
						<view class="flex_al_cen_ju_bet">
							<view>下单时间</view>
							<view> {{ forDate(orderObj.createTime) }}</view>
						</view>
						<view class="flexs">
							<view>订单备注</view>
							<view class="H2">
								{{ orderObj.remark || "无" }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
		<!-- 抢单 -->
	<view class="GrabanOrder" @click="makeOrder(proxy.$page.options.id)"
		v-if="(Types.orderType == 0 && Types.statusType == 0) ||(Types.orderType == 1 && Types.statusType == 0)">
		<text>{{ butChange.title }}</text>
		<u-count-down v-if="butChange.btn_disable" :time="forSeconds(orderObj.predictTime)" format="HH:mm:ss"
			@change="onChange">
			<view>
				{{ timeData.hours }}:{{ timeData.minutes }}:{{ timeData.seconds }}
			</view>
		</u-count-down>
	</view>
	<view class="confirmChange" @click="confirmChange" v-if="Types.statusType != 0">
		<!-- 待取货 配送中 -->
		<view class="GoodsCollected flex_al_cen_ju_bet">
			<view class="btn_icon_box">
				<view class="phone" @click="getPhoneList">
					<image v-if="orderObj.riderClientStatus==4" class="btn_icon"
						src="../../static/images/pulice/phone_icon_cc.png" mode=""></image>
					<image v-else class="btn_icon" src="../../static/images/pulice/phone_icon.png" mode=""></image>
					<view :style="{color:orderObj.riderClientStatus==4?'#AAAAAA':''}">联系</view>
				</view>
				<view class="btn_icon_center_solid"></view>
				<view class="phone" @click="clickIsShow">
					<image v-if="orderObj.riderClientStatus==1 && orderObj.status==1" class="btn_icon"
						src="../../static/images/pulice/convertOrder_icon.png" mode=""></image>
					<image v-else class="btn_icon" src="../../static/images/pulice/convertOrder_icon_cc.png" mode="">
					</image>
					<view :style="{color:(orderObj.riderClientStatus==1 && orderObj.status==1)?'':'#AAAAAA'}">转单</view>
				</view>
			</view>
			<!-- 待取货 -->
			<template v-if="Types.statusType == 1">
				<view class="btn" @click.stop="takeGoods(orderObj, orderObj.riderClientStatus)">
					{{ orderObj.BtnSaveTitle }}
				</view>
			</template>
			<template>
				<view class="btn">
					{{ Type == 1 ? "正在购买" : "确认送达" }}
				</view>
			</template>
			<!-- 配送中 -->
			<view class="distribution flex" v-if="Types.statusType == 2">
				<view class="Pickup" @click.stop="takeGoods(orderObj, orderObj.riderClientStatus)">
					{{ orderObj.titleName }}
				</view>
			</view>
		</view>
	</view>
	<!-- 转单弹出层 -->
	<c-refund-bottom-popup :isShow='isShow' popupTitle='转单原因' @clickConfirm="clickConfirm" @isShowFalse="isShowFalse"
		:radiolist="radiolist"></c-refund-bottom-popup>
	<!-- 电话联系 弹出层 -->
	<c-phone-mask-list :orderId="orderId" :phone="orderObj.riderPhone" :mapType="statusShowType" :phoneListShow="phoneListShow" :phoneBtnList="phoneBtnList"
		@btnCancel="btnCancel"></c-phone-mask-list>

	<!-- 缺省页 -->
	<DefaultPage v-if="defaultShow == true" :type="'notCommodity'" :tips="'暂无订单'"></DefaultPage>
</template>
<script setup lang="ts">
	import { getCurrentInstance, ref, reactive } from "vue";
	import HomeOrderDetails from "@/Hooks/Order/HomeOrderDetails";
	import DefaultPage from "@/components/DefaultPage.vue";
	import { riderLocationCache } from "@/Pinia";
	import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
	import {
		forDate,
		forHour,
		forSeconds,
		forNowTime,
		textTime,
	} from "@/utlis/time";
	import { getLocation } from "@/utlis/uni_api";

	const { proxy } = getCurrentInstance() as any;
	const {
		isShow,
		clickIsShow,
		orderId,
		radiolist,
		clickConfirm,
		isShowFalse,
		phoneListShow,
		getPhoneList,
		phoneBtnList,
		btnCancel,
		Type,
		confirmChange,
		timeData,
		onChange,
		takeGoods,
		getDelatis,
		orderObj,
		makeOrder,
		defaultShow,
		butChange,
		callPhone,
		statusShowType,
		setTimeShow,
		routeLine,
		covers,
	} = HomeOrderDetails(proxy);
	const Title = ref<string>("外卖订单");
	const Types = reactive({
		statusType: null, // 订单状态 {0,1,2}
		orderType: null, // 订单类型 {0,1}  0 外卖 1 跑腿
		index: null, // 订单序号
	});
	const TitleShow = ref<boolean>(true);
	const longitudeMap = ref("")
	const latitudeMap = ref("")
	onLoad((options : any) => {
		Types.index = proxy.$page.options.index;
		Types.statusType = proxy.$page.options.Type;
		Types.orderType = proxy.$page.options.orderType;
		orderId.value = options.id
		if (proxy.$page.options.orderType == 0) {
			Title.value = "外卖订单";
		} else {
			Title.value = "跑腿订单";
		}

		let locationCacheObj = riderLocationCache();
		let locations = locationCacheObj.locationCacheObj.lon + "," + locationCacheObj.locationCacheObj.lat;
		proxy.$API(proxy).CoordinateTransformation(locations,false)
			.then(async (res : { longitude : string; latitude : string }) => {
				longitudeMap.value = res.longitude
				latitudeMap.value = res.latitude
				await getDelatis(options.Type, options.id, res.longitude, res.latitude);
			});
	});
	const timesTamp = new Date();
	const nowSeconds = timesTamp.getTime();
</script>
<style scoped lang="scss">
	@import "../../static/css/Order/HomeOrderDetails.scss";
</style>
